<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>联动Demo</title>

    <link rel="stylesheet" href="http://127.0.0.1/arcgis_js_api/library/4.11/esri/css/main.css">
    <link rel="stylesheet" href="css/mainApp.css">
    <link rel="stylesheet" href="../dist/css/dextra.css">


    <script src="../dist/config.js"></script>

    <script src="http://127.0.0.1/arcgis_js_api/library/4.11/init.js"></script>
    <script>


        // Load the Map and MapView modules
        require(["esri/Map",


            "dextra/modules/viewers/MapViewer",
            "dextra/modules/viewers/SceneViewer",
            "dextra/modules/viewers/SyncViewer",
            "dojo/domReady!"], function(Map, MapViewer,SceneViewer,SyncViewer) {



            var myMap = new Map({
                  basemap:"topo",
            });
            var myMap2 = new Map({
                basemap:"topo",
                ground:"world-elevation"
            });

            var mapViewer = new MapViewer({
                map: myMap,
                viewNode: "viewDivMap",
            });
            var sceneViewer = new SceneViewer({
                map: myMap2,
                viewNode: "viewDivSecne",
            });

            var syncViewer = new SyncViewer({
                mapViewer:mapViewer,
                sceneViewer:sceneViewer
            });

            console.log(syncViewer.viewType);

            syncViewer.watch("viewType",function(){
                console.log(1)
                console.log(syncViewer.viewType);
                console.log(arguments);
            });



            setTimeout(function(){
                syncViewer.showView("scene-view");
                console.log(syncViewer.viewType);
            },5000)

        });
    </script>

</head>
<body>

<div id="viewDivSecne" style="width: 50%;height: 100%;float:left"></div>
<div id="viewDivMap" style="width: 50%;height: 100%"></div>
</body>
</html>